<template>
	<view>
		<!-- <view class="title">全部订单({{ orderList.length }})</view> -->
		<back-nav message='我的订单' :back="back"></back-nav>
		<view class="dataList">
			<view class="dataBox" v-for="(item, index) in orderList" :key="index">
				<view class="top">
					<view class="date">
						<text>{{ item.createTime || "--" }}</text>
					</view>
					<view class="state">
						<text>{{ item.orderStatus == 0 ? "待确认" : "" }}</text>
						<text>{{ item.orderStatus == 71 ? "未购买" : "" }}</text>
						<text>{{ item.orderStatus == 10 ? "订单进行中" : "" }}</text>
						<text>{{ item.orderStatus == 20 ? "订单识别中" : "" }}</text>
						<text>{{ item.orderStatus == 30 ? "订单识别异常" : "" }}</text>
						<text>{{ item.orderStatus == 40 ? "订单支付中" : "" }}</text>
						<text>{{ item.orderStatus == 50 ? "扣款轮询中" : "" }}</text>
						<text>{{ item.orderStatus == 60 ? "订单支付失败" : "" }}</text>
						<text>{{ item.orderStatus == 70 ? "订单已支付" : "" }}</text>
						<text>{{ item.orderStatus == 80 ? "订单已取消" : "" }}</text>
						<text>{{ item.orderStatus == 90 ? "开门失败，订单取消" : "" }}</text>
					</view>
				</view> 
				<view class="details">
					<view class="list" v-for="shopping in item.orderDetailList" v-if="item.orderDetailList.length > 0">
						<view class="pic">
							<image src="../../../static/icons/good.png" mode="scaleToFill"></image>
						</view>
						<view class="info">
							<view class="name">
								<text>{{shopping.goodsName}}</text>
							</view>
							<view class="money">
								<text>￥{{ shopping.salePrice }}</text>
							</view>
						</view>
						<view class="num">
							X{{shopping.buyCount}}
						</view>
					</view>
				</view>
				<view class="orderinfo">
					<view class="info" @click="JumpDetails(item)">
						<text>订单详情</text>
					</view>
					<view class="youhui">
						<text>优惠:</text>
						<text>￥{{ item.priceDiscount ||'--' }}</text>
					</view>
					<view class="pay">
						<text>实付:</text>
						<text>￥</text>
						<text>{{item.orderMoney}}</text>
					</view>
				</view>
				<view class="bottom">

				</view>
			</view>
		</view>
		<!-- <view class="blocks"> -->
		<!-- <block v-for="(item, index) in orderList" :key="index">
				<view class="block">
					<view class="header">
						<view class="orderNumber">{{ item.orderId || "--" }}</view>
						<view class="orderTime">{{ item.createTime || "--" }}</view>
					</view>
					<view class="msg">
						<view v-for="shopping in item.orderDetailList" v-if="item.orderDetailList.length > 0">
							<view class="name">
								<text
									class="shopping-name">{{shopping.goodsName + "*" + shopping.buyCount || "--"}}</text>
								<view class="singleMoney">{{ shopping.salePrice }}元</view>								
							</view>
						</view>
						<view v-else>
							<view class="name">
								<text class="shopping-name">未购买商品</text>
								<view class="singleMoney">0元</view>
							</view>
						</view>
						<view class="red-packet" v-if="item.priceDiscount > 0">
							<image src="../../../static/icons/red_packet.png" class="image"></image>
							<text>红包</text>
							<view class="red-packet-money">-{{ item.priceDiscount }}元</view>
						</view>
						<view class="action">
							<view class="price">订单总额<text>￥{{ item.orderMoney }}</text>
								<text style="color: grey;font-size: 20rpx;"></text>
							</view>
							<view v-if="item.refundStatus != '99'">
								{{ item.refundStatus == 100 ? "售后中" : "" }}
								{{ item.refundStatus == 110 ? "售后退款中" : "" }}
								{{ item.refundStatus == 120 ? "售后审核不通过" : "" }}
								{{ item.refundStatus == 130 ? "系统退款失败" : "" }}
								{{ item.refundStatus == 140 ? "已退款或部分退款" : "" }}
							</view>
							<view v-else>
								{{ item.orderStatus == 0 ? "订单未支付" : "" }}
								{{ item.orderStatus == 71 ? "未购买" : "" }}
								{{ item.orderStatus == 10 ? "订单进行中" : "" }}
								{{ item.orderStatus == 20 ? "订单识别中" : "" }}
								{{ item.orderStatus == 30 ? "订单识别异常" : "" }}
								{{ item.orderStatus == 40 ? "订单支付中" : "" }}
								{{ item.orderStatus == 50 ? "扣款轮询中" : "" }}
								{{ item.orderStatus == 60 ? "订单支付失败" : "" }}
								{{ item.orderStatus == 70 ? "订单已支付" : "" }}
								{{ item.orderStatus == 80 ? "订单已取消" : "" }}
								{{ item.orderStatus == 90 ? "开门失败，订单取消" : "" }}
							</view>
							<view class="operate" v-if="
                  item.orderStatus == 70 &&
                  item.refundStatus == 99 &&
                  item.payWay == 0
                ">
								<image src="../../../static/icons/money.png" class="image"></image>
								<text @click="refund(item.orderId)" style="color: #d92727">申请退款</text>
							</view>
							
							<button v-if="item.status == 1" class="button" @click="refund">申请退款</button>
						</view>
					</view>
				</view>
			</block> -->

		<!-- </view> -->
		<view class="empty" v-if="orderList.length == 0">
			<image src="../../../static/noneCoupon.png" mode="scaleToFill"></image>
			空空如也
		</view>
		<!-- <view v-else>
			<view class="noMore" v-if="noMore">没有更多啦</view>
		</view> -->
		<view class="footer">
			<view class="contents">
				<view class="nav" @click="IndexJump">
					<image src="../../../static/icons/home.png"></image>
					<view class="text">首页</view>
				</view>
				<view class="nav" @click="orderJump">
					<image src="../../../static/icons/orderActive.png"></image>
					<view class="text">订单</view>
				</view>
				<view class="nav1" @click="scanToGetData">
					<view class="image">
						<image src="../../../static/icons/scan.png" mode="scaleToFill"></image>
					</view>
					<view class="text">扫码开门</view>
				</view>
				<view class="nav" @click="fault">
					<image src="../../../static/icons/setting.png"></image>
					<view class="text">报修</view>
				</view>
				<view class="nav" @click="mine">
					<image src="../../../static/icons/mine.png"></image>
					<view class="text">我的</view>
				</view>
				<!-- <view class="open-wrapper" @click="openCondition" disabled="isOpening"> -->
				<!-- #ifdef MP-WEIXIN -->
				<!-- <image class="logo" src="../../static/icons/payscore_logo.png" v-if="needUserConfirm" /> -->
				<!-- #endif -->
				<!-- <view class="open">立即开门</view> -->
				<!-- </view> -->
				<!-- #ifdef MP-WEIXIN -->
				<!--  <view class="slogan-wechat">
		            <image class="payscore-logo" src="../../static/icons/payscore_logo.png" mode="widthFix" />
		            <label class="payscore-text">微信支付分</label>
		            <label class="vertical-bar">|</label>
		            <label class="payscore-text">550分及以上优享</label>
		        </view> -->
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	import order from "./order.js";
	export default order;
</script>

<style lang="scss" scoped>
	page {
		background: #F1F1F1;
	}

	.dataList {
		padding-bottom: 230rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-top: 20rpx;
	}

	.orderinfo {
		display: flex;
		align-items: center;
		height: 7vh;
		position: relative;

		.info {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 150rpx;
			height: 40rpx;
			border: 1rpx solid #33a814;
			border-radius: 20rpx;
			border-color: #33a814;
			color: #33a814;
			margin-left: 20rpx;
		}

		.youhui {
			position: absolute;
			color: #33a814;
			font-size: 27rpx;
			right: 240rpx;
			transform: translateY(-50%);
			top: 50%;

			text:nth-child(2) {
				font-size: 30rpx;
			}
		}

		.pay {
			font-size: 25rpx;
			position: absolute;
			right: 30rpx;
			transform: translateY(-50%);
			top: 50%;

			text:nth-child(1) {}

			;

			text:nth-child(2) {
				margin-left: 20rpx;
			}

			;

			text:nth-child(3) {
				color: #33a814;
				font-size: 30rpx;
			}

			;
		}
	}

	.details {
		.list {
			position: relative;
			display: flex;
			border-bottom: 1rpx solid #e7e7e7;

			.pic {
				margin-top: 30rpx;
				margin-left: 30rpx;
				height: 150rpx;
				width: 150rpx;
				border: 1rpx solid #c9c9c9;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					height: 90%;
					width: 90%;
				}
			}

			.info {
				width: 350rpx;
				height: 200rpx;
				display: flex;
				justify-content: center;
				// align-items: center;
				flex-direction: column;
				margin-left: 30rpx;

				.name {
					width: 90%;
					font-size: 27rpx;
					display: flex;
					word-break: break-all;
				}

				.money {
					font-size: 20rpx;
					color: #33a814;
					margin-top: 20rpx;
				}
			}

			.num {
				font-size: 25rpx;
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
			}
		}
	}

	.dataBox {
		width: 90%;
		border-radius: 20rpx;
		background-color: #fff;
		position: relative;
		margin-top: 30rpx;
		.bottom {
			height: 0.6vh;
			width: 100%;
			background-color: #34a815;
			border-bottom-right-radius: 10rpx;
			border-bottom-left-radius: 10rpx;
			position: absolute;
			bottom: 0;
			left: 0;
		}

		.top {
			display: flex;
			align-items: center;
			height: 100rpx;
			border-bottom: 1rpx solid #e7e7e7;
			position: relative;

			.date {
				color: #606060;
				font-size: 25rpx;
				margin-left: 20rpx;
			}

			.state {
				position: absolute;
				right: 30rpx;
				transform: translateY(-50%);
				top: 50%;
				width: 150rpx;
				height: 50rpx;
				background-color: #33a814;
				border-radius: 20rpx;
				color: #fff;
				font-size: 25rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}


	.empty {
		width: 230rpx;
		height: 170rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.title {
		background: white;
		font-size: 30rpx;
		padding: 30rpx;
	}

	.blocks {
		margin-bottom: 100rpx;
	}

	.blocks .block {
		background: white;
		margin-top: 20rpx;
	}

	.blocks .block .header {
		display: flex;
		align-items: center;
		padding: 30rpx 30rpx;
		border-bottom: 1px dashed lightgray;
	}

	.blocks .block .header .orderNumber {
		border-left: 2px solid orange;
		padding-left: 10rpx;
		flex: 1;
	}

	.image {
		height: 48rpx;
		width: 48rpx;
		margin-right: 10rpx;
		vertical-align: middle;
	}

	.blocks .block .msg {
		padding: 0 30rpx;
	}

	.blocks .block .msg .name {
		padding: 30rpx 0rpx;
		font-size: 26rpx;
		border-bottom: 1px solid lightgrey;
	}

	.blocks .block .msg .red-packet {
		padding: 30rpx 0rpx;
		font-size: 26rpx;
		border-bottom: 1px solid lightgrey;
	}

	.blocks .block .msg .red-packet-money {
		width: 236rpx;
		text-align: center;
		float: right;
		color: #D92727;
	}

	.blocks .block .msg .singleMoney {
		width: 236rpx;
		text-align: center;
		float: right;
		color: #D92727;
	}

	.blocks .block .msg .action {
		display: flex;
		padding: 20rpx 0rpx;
		align-items: center;
		justify-content: space-between
	}

	.shopping-name {
		width: 400rpx;
		display: inline-block;
	}

	.blocks .block .msg .action .price {
		font-size: 26rpx;
		color: #101010;
	}

	.blocks .block .msg .action .status {
		font-size: 26rpx;
		/* flex: 1; */
		color: #101010;
		/* text-align: center; */
	}

	.blocks .block .msg .action .operate {
		font-size: 26rpx;
		/* flex: 1; */
		/* text-align: center; */
		color: #101010;
	}

	.blocks .block .msg .action .price text {
		font-size: 26rpx;
		color: #101010;
	}

	.blocks .block .msg .action .button {
		background: lightgray;
		color: grey;
		border: 0;
		border-radius: 10rpx;
		font-size: 25rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-left: 15rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 8vh;
		/* color: #fff; */
	}

	.footer .contents {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding-bottom: 10rpx;
		// padding-top: 10rpx;
		position: relative;
		box-shadow: #eaeaea 4rpx 0 4rpx 0;
	}

	.footer .nav {
		width: 20vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}

	.footer .nav image {
		width: 50rpx;
		height: 50rpx;
		position: relative;
	}

	.footer .nav1 .image image {
		width: 50rpx;
		height: 50rpx;
		position: relative;
	}

	.footer .nav1 .image {
		width: 90rpx;
		height: 90rpx;
		border-radius: 45%;
		background-color: #004da0;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10rpx;
	}

	.footer .nav .text {
		font-size: 28rpx;
		color: #c9c9c9;
	}

	.footer .nav1 .text {
		font-size: 28rpx;
		color: #c9c9c9;
	}

	.footer .contents .nav1 {
		z-index: 999;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 45%;
		height: 140rpx;
		width: 140rpx;
		background-color: #fff;
		top: -45rpx;
		position: relative;
	}
</style>